{extend name="base" /}
{block name="css"}

{/block}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body" style="padding-top: 40px;">
        <!-- 分布表单开始 -->
        <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="formStepsStep"
             style="max-width: 650px;">
            <!-- 标题 -->
            <ul class="layui-tab-title">
                <li class="layui-this">
                    <i class="layui-icon layui-icon-ok">1</i>
                    <span class="layui-steps-title">第一步</span>
                    <span class="layui-steps-content">选择续费时长</span>
                </li>
                <li>
                    <i class="layui-icon layui-icon-ok">2</i>
                    <span class="layui-steps-title">第二步</span>
                    <span class="layui-steps-content">在线缴费</span>
                </li>
                <li>
                    <i class="layui-icon layui-icon-ok">3</i>
                    <span class="layui-steps-title">第三步</span>
                    <span class="layui-steps-content">续费成功</span>
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 表单一 -->
                    <form class="layui-form" style="max-width: 460px;margin: 0 auto;padding: 40px 30px 0 0;">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">续费时长:</label>
                            <div class="layui-input-block">
                                <select name="payAccount" lay-verType="tips" lay-verify="required" required>
                                    <option value="1">一年(4999)</option>
                                    <option value="3">两年送一年(9998元)</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-filter="formStepSubmit1" lay-submit>&emsp;下一步&emsp;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <!-- 表单二 -->
                    <form class="layui-form" style="max-width: 460px;margin: 0 auto;padding: 40px 30px 0 0;">

                        <div class="layui-form-item">
                            <label class="layui-form-label">付款金额:</label>
                            <div class="layui-form-mid layui-word-aux">
                                <span style="font-size: 18px;color: #333;">4999</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-primary" data-steps="prev"> 上 一 步&nbsp;
                                </button>
                                <button class="layui-btn" lay-filter="formStepSubmit2" lay-submit>&emsp;提交&emsp;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item text-center" style="padding-top: 40px;">
                    <!-- 表单三 -->
                    <i class="layui-icon layui-icon-ok layui-circle"
                       style="background: #52C41A;color: #fff;font-size:30px;font-weight:bold;padding: 20px;line-height: 80px;"></i>
                    <div style="font-size: 24px;color: #333;margin-top: 30px;">操作成功</div>
                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                    <div style="text-align: center;margin: 50px 0 25px 0;">
                        <button class="layui-btn" data-steps="next">再转一笔</button>
                        <button class="layui-btn layui-btn-primary">查看账单</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- //分布表单结束 -->
        <hr>
        <div style="padding: 10px 30px 20px 30px;">
            <h3>说明</h3><br>
            <h4>暂时只支持微信支付</h4>
            <p class="layui-text">系统续费一年199元</p>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'steps'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var steps = layui.steps;

        /* 表单一提交事件 */
        form.on('submit(formStepSubmit1)', function (data) {
            steps.next('formStepsStep');
            return false;
        });

        /* 表单二提交事件 */
        form.on('submit(formStepSubmit2)', function (data) {
            steps.next('formStepsStep');
            return false;
        });

    });
</script>
{/block}